<script>
export default {
  data() {
    return {
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      gotoJud: false,
      navMenuCategory: null,
      navMenuJud: false,
      navMenuText: "",
      navMenuSubNum: null,
    };
  },
  props: {
    showAttrsList: Boolean,
    fa_this: Object,
  },
  render(h) {
    let aimAttrs = this.$store.state.aimAttrs;
    let that = this.fa_this;
    return (
      <div>
        <a-button
          type="primary"
          shape="circle"
          icon="search"
          ghost
          on={{
            click: (e) => {
              this.$emit("changeShowAttrsList", false);
              this.$store.commit("changeJudgeColorDom", { e, that });
            },
          }}
        />
        <div style={{ overflow: "auto" }}>
          {aimAttrs.sort != undefined && (
            <div class="styleValue">
              <span>
                页面位置:
                <span
                  style={{
                    color: "#0084ff",
                    fontSize: "18px",
                    marginLeft: "10px",
                  }}
                >
                  {aimAttrs.sort}
                </span>
              </span>
              <a-button-group>
                <a-button
                  disabled={aimAttrs.sort == 0}
                  on={{
                    click: () => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: { value: aimAttrs.sort, type: "up" },
                        attrsName: "sort",
                        that,
                      });
                    },
                  }}
                >
                  <a-icon type="arrow-up" style={{ color: "#08c" }} />
                  上移
                </a-button>
                <a-button
                  disabled={aimAttrs.sort == that.tree[that.pageName].length - 1}
                  on={{
                    click: () => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: { value: aimAttrs.sort, type: "down" },
                        attrsName: "sort",
                        that,
                      });
                    },
                  }}
                >
                  下移
                  <a-icon type="arrow-down" style={{ color: "#52c41a" }} />
                </a-button>
              </a-button-group>
            </div>
          )}
          {aimAttrs.context != undefined && (
            <div class="styleValue">
              <span>文本</span>
              <a-input
                value={aimAttrs.context}
                placeholder={aimAttrs.context}
                style={{ width: "180px" }}
                on={{
                  change: (e) => {
                    this.$store.commit("aimAttrsChange", {
                      newValue: e.path[0].value,
                      attrsName: "context",
                      that,
                    });
                  },
                }}
              />
            </div>
          )}
          {aimAttrs.imageUrl != undefined && (
            <div class="styleValue">
              <span>图片选择</span>
              <el-button
                type="primary"
                plain
                size="small"
                on={{
                  click: async () => {
                    await this.$store.commit("uploadImage", {
                      jud: false,
                      that,
                      fn: (data, err) => {
                        if (err && data.length != 0) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: data[0],
                          attrsName: "imageUrl",
                          that,
                        });
                      },
                    });
                  },
                }}
              >
                选择本地图片
              </el-button>
            </div>
          )}
          {aimAttrs.width != undefined && (
            <div class="styleValue">
              <span>宽度</span>
              <a-input-number
                value={aimAttrs.width}
                min={0}
                formatter={(value) => `${value}px`}
                parser={(value) => value.replace("p", "").replace("x", "")}
                style={{ width: "180px" }}
                on={{
                  change: (e) => {
                    if (e == null || e == "") return;
                    this.$store.commit("aimAttrsChange", {
                      newValue: e,
                      attrsName: "width",
                      that,
                    });
                  },
                }}
              />
            </div>
          )}
          {aimAttrs.height != undefined && (
            <div class="styleValue">
              <span>高度</span>
              <a-input-number
                value={aimAttrs.height}
                min={0}
                formatter={(value) => `${value}px`}
                parser={(value) => value.replace("p", "").replace("x", "")}
                style={{ width: "180px" }}
                on={{
                  change: (e) => {
                    if (e == null || e == "") return;
                    this.$store.commit("aimAttrsChange", {
                      newValue: e,
                      attrsName: "height",
                      that,
                    });
                  },
                }}
              ></a-input-number>
            </div>
          )}
          {aimAttrs.seniorBoxSize != undefined && (
            <div class="styleValue seniorBoxSize">
              <span>
                宽高比
                <el-tooltip
                  class="item"
                  content="该模型宽高以%为单位，请总和不要超过100%"
                >
                  <el-button
                    icon="el-icon-question"
                    circle
                    style={{ padding: 0, marginLeft: "10px" }}
                  ></el-button>
                </el-tooltip>
              </span>
              <div style={{ width: "100%" }}>
                <div class="seniorBox">
                  {this.$explain(this, h, aimAttrs.seniorBoxSize.dom)}
                </div>
              </div>
              {aimAttrs.seniorBoxSize.size.map((item, index) => {
                return (
                  <div
                    style={{
                      "font-size": "14px",
                      "line-height": "14px",
                      margin: "5px",
                      width: "100%",
                    }}
                  >
                    <span>模块{index}</span>
                    <div
                      style={{
                        display: "flex",
                        "justify-content": "space-evenly",
                        "line-height": "40px",
                        width: "100%",
                      }}
                    >
                      <a-input-number
                        value={item.width}
                        min={10}
                        max={76}
                        formatter={(value) => `${value}%`}
                        parser={(value) => value.replace("%", "")}
                        style={{ width: "100px" }}
                        on={{
                          change: (e) => {
                            this.$store.commit("aimAttrsChange", {
                              newValue: {
                                index,
                                type: "width",
                                value: e,
                              },
                              attrsName: "seniorBoxSize",
                              that,
                            });
                          },
                        }}
                      ></a-input-number>
                      <a-icon type="close" style={{ "line-height": "32px" }} />
                      <a-input-number
                        value={item.height}
                        min={10}
                        max={76}
                        formatter={(value) => `${value}%`}
                        parser={(value) => value.replace("%", "")}
                        style={{ width: "100px" }}
                        disabled={item.height == "100" ? true : false}
                        on={{
                          change: (e) => {
                            this.$store.commit("aimAttrsChange", {
                              newValue: {
                                index,
                                type: "height",
                                value: e,
                              },
                              attrsName: "seniorBoxSize",
                              that,
                            });
                          },
                        }}
                      ></a-input-number>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
          {aimAttrs.navMenuList != undefined && (
            <div class="styleValue">
              <span>结构编辑</span>
              <div style={{ width: "100%" }}>
                {aimAttrs.navMenuList.value.map((item, index) => {
                  if (aimAttrs.navMenuList.type == "navMenuSub" && index == 0) {
                    return (
                      <div class="styleValue" style={{ width: "100%" }}>
                        <span>
                          {aimAttrs.navMenuList.type == "navMenu"
                            ? `下标：${index}`
                            : item}
                        </span>
                        <el-button
                          type="primary"
                          title="修改"
                          icon="el-icon-edit"
                          size="small"
                          on={{
                            click: () => {
                              this.navMenuSubNum = index;
                              this.navMenuJud = true;
                              this.navMenuText = item;
                            },
                          }}
                        ></el-button>
                      </div>
                    );
                  }
                  return (
                    <div class="styleValue" style={{ width: "100%" }}>
                      <span>
                        {aimAttrs.navMenuList.type == "navMenu"
                          ? `下标：${index}`
                          : item}
                      </span>
                      <el-button-group>
                        <el-button
                          type="primary"
                          title="上移"
                          icon="el-icon-top"
                          size="small"
                          disabled={
                            aimAttrs.navMenuList.type == "navMenuSub"
                              ? index == 1
                              : index == 0
                          }
                          on={{
                            click: () => {
                              this.$store.commit("aimAttrsChange", {
                                newValue: [
                                  aimAttrs.navMenuList.type,
                                  index,
                                  "up",
                                ],
                                attrsName: "changeNavMenuList",
                                that,
                              });
                            },
                          }}
                        ></el-button>
                        <el-button
                          type="success"
                          title="下移"
                          icon="el-icon-bottom"
                          size="small"
                          disabled={
                            index == aimAttrs.navMenuList.value.length - 1
                          }
                          on={{
                            click: () => {
                              this.$store.commit("aimAttrsChange", {
                                newValue: [
                                  aimAttrs.navMenuList.type,
                                  index,
                                  "down",
                                ],
                                attrsName: "changeNavMenuList",
                                that,
                              });
                            },
                          }}
                        ></el-button>
                        <el-button
                          type="danger"
                          title="删除"
                          icon="el-icon-delete"
                          size="small"
                          on={{
                            click: () => {
                              this.$store.commit("aimAttrsChange", {
                                newValue: [
                                  aimAttrs.navMenuList.type,
                                  index,
                                  "delete",
                                ],
                                attrsName: "changeNavMenuList",
                                that,
                              });
                            },
                          }}
                        ></el-button>
                        <el-button
                          type="primary"
                          title="修改"
                          icon="el-icon-edit"
                          size="small"
                          on={{
                            click: () => {
                              this.navMenuSubNum = index;
                              this.navMenuJud = true;
                              this.navMenuText = item;
                            },
                          }}
                        ></el-button>
                      </el-button-group>
                    </div>
                  );
                })}
                <div
                  style={{
                    display: "flex",
                    "justify-content": "space-between",
                    margintop: "10px",
                  }}
                >
                  {aimAttrs.navMenuList.type == "navMenu" && (
                    <el-select
                      value={this.navMenuCategory}
                      placeholder="请选择种类"
                      on={{
                        change: (e) => {
                          this.navMenuCategory = e;
                        },
                      }}
                      style={{ width: "45%", margin: "auto 0" }}
                      size="small"
                    >
                      <el-option label="下拉菜单" value="1"></el-option>
                      <el-option label="文字" value="2"></el-option>
                    </el-select>
                  )}
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    style={{ width: "45%", margin: "5px 0" }}
                    on={{
                      click: () => {
                        this.$store.commit("aimAttrsChange", {
                          newValue:
                            aimAttrs.navMenuList.type == "navMenu"
                              ? this.navMenuCategory
                              : "navMenuSub",
                          attrsName: "addNavMenuList",
                          that,
                        });
                      },
                    }}
                  >
                    添加新模块
                  </el-button>
                </div>
              </div>
            </div>
          )}
          {aimAttrs.colWidth != undefined && (
            <div class="styleValue">
              <span>宽度</span>
              <div style={{ maxWidth: "100%", display: "flex" }}>
                <a-input-number
                  value={aimAttrs.colWidth[0]}
                  on={{
                    change: (e) => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: [0, e],
                        attrsName: "colWidth",
                        that,
                      });
                    },
                  }}
                  min={10}
                  max={
                    aimAttrs.colWidth.length == "3"
                      ? 96 - aimAttrs.colWidth[1] - aimAttrs.colWidth[2]
                      : 96 - aimAttrs.colWidth[1]
                  }
                  controls-position="right"
                ></a-input-number>
                <span style={{ margin: "5px" }}>:</span>
                <a-input-number
                  value={aimAttrs.colWidth[1]}
                  on={{
                    change: (e) => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: [1, e],
                        attrsName: "colWidth",
                        that,
                      });
                    },
                  }}
                  min={10}
                  max={
                    aimAttrs.colWidth.length == "3"
                      ? 96 - aimAttrs.colWidth[0] - aimAttrs.colWidth[2]
                      : 96 - aimAttrs.colWidth[0]
                  }
                  controls-position="right"
                ></a-input-number>
                {aimAttrs.colWidth.length == "3" && (
                  <span style={{ margin: "5px" }}>:</span>
                )}
                {aimAttrs.colWidth.length == "3" && (
                  <a-input-number
                    value={aimAttrs.colWidth[2]}
                    on={{
                      change: (e) => {
                        this.$store.commit("aimAttrsChange", {
                          newValue: [2, e],
                          attrsName: "colWidth",
                          that,
                        });
                      },
                    }}
                    min={10}
                    max={96 - aimAttrs.colWidth[1] - aimAttrs.colWidth[0]}
                    controls-position="right"
                  ></a-input-number>
                )}
              </div>
            </div>
          )}
          {aimAttrs.borderRadius != undefined && (
            <div class="styleValue">
              <span>圆角</span>
              <a-input-number
                value={aimAttrs.borderRadius}
                min={0}
                formatter={(value) => `${value}px`}
                parser={(value) => value.replace("p", "").replace("x", "")}
                style={{ width: "180px" }}
                on={{
                  change: (e) => {
                    if (e == null) return;
                    this.$store.commit("aimAttrsChange", {
                      newValue: e,
                      attrsName: "borderRadius",
                      that,
                    });
                  },
                }}
              ></a-input-number>
            </div>
          )}
          {aimAttrs.opacity != undefined && (
            <div class="styleValue">
              <span>透明度</span>
              <a-input-number
                value={aimAttrs.opacity}
                min={0}
                max={1}
                step={0.1}
                style={{ width: "180px" }}
                on={{
                  change: (e) => {
                    this.$store.commit("aimAttrsChange", {
                      newValue: e,
                      attrsName: "opacity",
                      that,
                    });
                  },
                }}
              ></a-input-number>
            </div>
          )}
          {aimAttrs.justifyContent != undefined && (
            <div class="styleValue">
              <span>对齐方式</span>
              <el-radio-group
                value={aimAttrs.justifyContent}
                size="mini"
                on={{
                  input: (e) => {
                    this.$store.commit("aimAttrsChange", {
                      newValue: e,
                      attrsName: "justifyContent",
                      that,
                    });
                  },
                }}
              >
                <el-radio-button label="center">中间</el-radio-button>
                <el-radio-button label="flex-start">左侧</el-radio-button>
                <el-radio-button label="flex-end">右侧</el-radio-button>
                <el-radio-button label="space-between">靠边</el-radio-button>
                <el-radio-button label="space-around">均匀</el-radio-button>
              </el-radio-group>
            </div>
          )}
          {aimAttrs.carousel != undefined && (
            <div>
              <div class="styleValue">
                <span>图片更换</span>
                <div style={{ width: "100%" }}>
                  {aimAttrs.carousel.imgList.map((item, index) => {
                    return (
                      <div
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                        }}
                      >
                        <img
                          style={{
                            width: "90px",
                            height: "50px",
                            margin: "3px",
                            marginLeft: "10px",
                          }}
                          src={item}
                        />
                        <el-button-group style={{ "margin-top": "12px" }}>
                          <el-button
                            type="primary"
                            size="small"
                            plain
                            on={{
                              click: async () => {
                                await this.$store.commit("uploadImage", {
                                  jud: false,
                                  that,
                                  fn: (data, err) => {
                                    if (err && data.length == 0) return;
                                    this.$store.commit("aimAttrsChange", {
                                      newValue: {
                                        type: "imgUrl",
                                        value: data[0],
                                        index,
                                      },
                                      attrsName: "carousel",
                                      that,
                                    });
                                  },
                                });
                              },
                            }}
                          >
                            <i class="el-icon-edit"></i>更换
                          </el-button>
                          <el-button
                            type="danger"
                            size="small"
                            plain
                            on={{
                              click: () => {
                                this.$store.commit("aimAttrsChange", {
                                  newValue: {
                                    type: "delete",
                                    index,
                                  },
                                  attrsName: "carousel",
                                  that,
                                });
                              },
                            }}
                          >
                            <i class="el-icon-delete"></i>删除
                          </el-button>
                        </el-button-group>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div style={{ width: "80%", margin: "0 auto" }}>
                <el-button
                  type="primary"
                  style={{ width: "100%" }}
                  size="small"
                  on={{
                    click: async () => {
                      await this.$store.commit("uploadImage", {
                        jud: false,
                        that,
                        fn: (data, err) => {
                          if (err && data.length == 0) return;
                          this.$store.commit("aimAttrsChange", {
                            newValue: {
                              type: "add",
                              value: data[0],
                            },
                            attrsName: "carousel",
                            that,
                          });
                        },
                      });
                    },
                  }}
                >
                  增加组件
                </el-button>
              </div>
              <div class="styleValue">
                <span>轮播图高度</span>
                <a-input-number
                  value={aimAttrs.carousel.height}
                  min={1}
                  formatter={(value) => `${value}px`}
                  parser={(value) => value.replace("p", "").replace("x", "")}
                  style={{ width: "180px" }}
                  on={{
                    change: (e) => {
                      if (e == null || e == "") return;
                      this.$store.commit("aimAttrsChange", {
                        newValue: { type: "height", value: e },
                        attrsName: "carousel",
                        that,
                      });
                    },
                  }}
                ></a-input-number>
              </div>
              <div class="styleValue">
                <span>轮播图方式</span>
                <el-radio-group
                  value={aimAttrs.carousel.type}
                  on={{
                    input: (e) => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: { type: "type", value: e },
                        attrsName: "carousel",
                        that,
                      });
                    },
                  }}
                >
                  <el-radio-button label="none">通栏</el-radio-button>
                  <el-radio-button label="card">卡片</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          )}
          {aimAttrs.margin != undefined && (
            <el-collapse>
              <el-collapse-item title="外边距">
                <div class="styleValue">
                  <span>上</span>
                  <a-input-number
                    value={aimAttrs.margin.top}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "marginTop",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>下</span>
                  <a-input-number
                    value={aimAttrs.margin.bottom}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "marginBottom",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>左</span>
                  <a-input-number
                    value={aimAttrs.margin.left}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "marginLeft",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>右</span>
                  <a-input-number
                    value={aimAttrs.margin.right}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "marginRight",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.padding != undefined && (
            <el-collapse>
              <el-collapse-item title="内边距">
                <div class="styleValue">
                  <span>上</span>
                  <a-input-number
                    value={aimAttrs.padding.top}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "paddingTop",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>下</span>
                  <a-input-number
                    value={aimAttrs.padding.bottom}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "paddingBottom",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>左</span>
                  <a-input-number
                    value={aimAttrs.padding.left}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "paddingLeft",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>右</span>
                  <a-input-number
                    value={aimAttrs.padding.right}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e == "" ? 0 : e,
                          attrsName: "paddingRight",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.position != undefined && (
            <el-collapse>
              <el-collapse-item title="容器规则">
                <div class="styleValue">
                  <span>模式</span>
                  <el-radio-group
                    value={aimAttrs.position}
                    on={{
                      input: (e) => {
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "position",
                          that,
                        });
                      },
                    }}
                  >
                    <el-radio-button label="absolute">自由</el-radio-button>
                    <el-radio-button label="fixed">固定</el-radio-button>
                  </el-radio-group>
                </div>
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.color != undefined && (
            <el-collapse>
              <el-collapse-item title="字体">
                <div class="styleValue">
                  <span>颜色</span>
                  <el-color-picker
                    value={aimAttrs.color}
                    show-alpha
                    predefine={this.predefineColors}
                    on={{
                      change: (e) => {
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "color",
                          that,
                        });
                      },
                    }}
                  ></el-color-picker>
                </div>
                <div class="styleValue">
                  <span>粗细</span>
                  <a-input-number
                    value={aimAttrs.fontWeight}
                    min={100}
                    max={900}
                    step={100}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null || e < 100) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "fontWeight",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>大小</span>
                  <a-input-number
                    value={aimAttrs.fontSize}
                    min={12}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null || e < 12) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "fontSize",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.backgroundColor != undefined && (
            <el-collapse>
              <el-collapse-item title="背景">
                <div class="styleValue">
                  <span>背景颜色</span>
                  <el-color-picker
                    value={aimAttrs.backgroundColor}
                    show-alpha
                    predefine={this.predefineColors}
                    on={{
                      change: (e) => {
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "backgroundColor",
                          that,
                        });
                      },
                    }}
                  ></el-color-picker>
                </div>
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.borderWidth != undefined && (
            <el-collapse>
              <el-collapse-item title="边框">
                <div class="styleValue">
                  <span>颜色</span>
                  <el-color-picker
                    value={aimAttrs.borderColor}
                    show-alpha
                    predefine={this.predefineColors}
                    on={{
                      change: (e) => {
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "borderColor",
                          that,
                        });
                        if (aimAttrs.borderWidth == 0) {
                          this.$store.commit("aimAttrsChange", {
                            newValue: e,
                            attrsName: "borderWidth",
                            that,
                          });
                        }
                      },
                    }}
                  ></el-color-picker>
                </div>
                <div class="styleValue">
                  <span>宽度</span>
                  <a-input-number
                    value={aimAttrs.borderWidth}
                    min={0}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "borderWidth",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.boxShadow != undefined && (
            <el-collapse>
              <el-collapse-item title="阴影">
                <div class="styleValue">
                  <span>颜色</span>
                  <el-color-picker
                    value={aimAttrs.boxShadow.color}
                    show-alpha
                    predefine={this.predefineColors}
                    on={{
                      change: (e) => {
                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "boxShadow-color",
                          that,
                        });
                      },
                    }}
                  ></el-color-picker>
                </div>
                <div class="styleValue">
                  <span>X轴</span>
                  <a-input-number
                    value={aimAttrs.boxShadow.hShadow}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;

                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "boxShadow-hShadow",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>Y轴</span>
                  <a-input-number
                    value={aimAttrs.boxShadow.vShadow}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;

                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "boxShadow-vShadow",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>模糊距离</span>
                  <a-input-number
                    value={aimAttrs.boxShadow.blur}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;

                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "boxShadow-blur",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
                <div class="styleValue">
                  <span>阴影大小</span>
                  <a-input-number
                    value={aimAttrs.boxShadow.spread}
                    formatter={(value) => `${value}px`}
                    parser={(value) => value.replace("p", "").replace("x", "")}
                    style={{ width: "180px" }}
                    on={{
                      change: (e) => {
                        if (e == null) return;

                        this.$store.commit("aimAttrsChange", {
                          newValue: e,
                          attrsName: "boxShadow-spread",
                          that,
                        });
                      },
                    }}
                  ></a-input-number>
                </div>
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.goto != undefined && (
            <el-collapse>
              <el-collapse-item title="设置链接">
                <div class="styleValue">
                  <span>链接类型</span>
                  <el-radio-group
                    value={aimAttrs.goto.type}
                    on={{
                      input: (e) => {
                        this.gotoJud = e == "none" ? false : true;
                        this.$store.commit("aimAttrsChange", {
                          newValue: { type: e, value: null },
                          attrsName: "goto",
                          that,
                        });
                      },
                    }}
                  >
                    <el-radio-button label="none">无</el-radio-button>
                    <el-radio-button label="in">站内</el-radio-button>
                    <el-radio-button label="out">站外</el-radio-button>
                  </el-radio-group>
                </div>
                {this.gotoJud && (
                  <div class="styleValue">
                    <span>链接</span>
                    <el-input
                      value={aimAttrs.goto.value}
                      placeholder="请输入链接"
                      on={{
                        input: (e) => {
                          console.log(e);
                          this.$store.commit("aimAttrsChange", {
                            newValue: { type: aimAttrs.goto.type, value: e },
                            attrsName: "goto",
                            that,
                          });
                        },
                      }}
                    ></el-input>
                  </div>
                )}
              </el-collapse-item>
            </el-collapse>
          )}
          {aimAttrs.canDelete != undefined && (
            <div class="styleValue">
              <el-popconfirm
                title="确定删除组件？"
                style={{ width: "80%", margin: "auto" }}
                on={{
                  confirm: () => {
                    this.$store.commit("deleteComponent", {
                      that: this.fa_this,
                      sort: aimAttrs.sort ? aimAttrs.sort : false,
                    });
                  },
                }}
              >
                <el-button
                  slot="reference"
                  type="danger"
                  style={{ width: "100%" }}
                >
                  删除组件
                </el-button>
              </el-popconfirm>
            </div>
          )}
        </div>
        {/*导航菜单文本修改*/}
        <el-dialog
          width="30%"
          show-close={false}
          visible={this.navMenuJud}
          modal={false}
        >
          <el-input
            value={this.navMenuText}
            placeholder="请输入内容"
            on={{
              input: (e) => {
                this.navMenuText = e;
              },
            }}
          ></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button
              on={{
                click: () => {
                  this.navMenuJud = false;
                },
              }}
            >
              取 消
            </el-button>
            <el-button
              type="primary"
              on={{
                click: () => {
                  this.navMenuJud = false;
                  this.$store.commit("aimAttrsChange", {
                    newValue: [this.navMenuSubNum, this.navMenuText],
                    attrsName: "changeNavMenuSub",
                    that,
                  });
                },
              }}
            >
              确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
    );
  },
};
</script>

<style lang="scss">
.float {
  // position: fixed;
  // top: 60px;
  // border: #ccc 1px solid;
  // height: 80vh;
  // overflow: auto;
  // padding: 10px;
  // z-index: 99;
  // background-color: #ffffffbd;
  .styleValue {
    display: flex;
    padding-top: 15px;
    font-size: 14px;
    line-height: 14px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 5px;
    > span {
      margin: 10px;
    }
  }
  div.el-collapse-item__header {
    font-size: 18px;
  }
}

.seniorBoxSize {
  .seniorBox {
    width: 150px;
    height: 90px;
    display: flex;
    justify-content: space-around;
    color: white;
    margin: auto;
    .seniorBoxItem0 {
      background-color: #3ec1d3;
    }
    .seniorBoxItem0::before {
      content: "0";
    }
    .seniorBoxItem1 {
      background-color: #ff9a00;
    }
    .seniorBoxItem1::before {
      content: "1";
    }
    .seniorBoxItem2 {
      background-color: #ff165d;
    }
    .seniorBoxItem2::before {
      content: "2";
    }
    .seniorBoxItem3 {
      background-color: #94da12;
    }
    .seniorBoxItem3::before {
      content: "3";
    }
    .seniorBoxItem4 {
      background-color: #0070d8;
    }
    .seniorBoxItem4::before {
      content: "4";
    }
  }
  .el-input {
    width: 40%;
  }
}
</style>
